{% extends "base2.html" %}

{% block conteudo %}

<div id="tabela" class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>Pagamento</h4>
        <table class="table table-striped table-bordered table-hover table-responsive">
            <tr>
                <th class="text-right">Descrição</th>
                <th class="text-right">Valor</th>
                <th class="text-center" style="width: 30px;"></th>
            </tr>
            <tr>
                <td class="text-right">Sub total</td>
                <td class="text-right">{% if not pedido.fechado %}<a href="" onclick="return desconto({{ pedido.id }}, '{{ pedido.desconto|floatformat:2 }}', '{{ csrf_token }}');">{{ pedido.subtotal|floatformat:2 }}</a>{% else %}{{ pedido.subtotal|floatformat:2 }}{% endif %}</td>
                <td class="text-center" style="width: 30px;"></td>
            </tr>
            
            <tr class="warning">
                <td class="text-right">
                    <div class="checkbox pull-right" style="margin: 0">
                        {% if not pedido.fechado %}
                        <label>
                            <input id="taxa_servico" type="checkbox" name="taxa_servico" title="Taxa de serviço" {% if pedido.taxa_servico %}checked{% endif %} /> Serviço
                        </label>
                        {% else %}
                        Serviço
                        {% endif %}
                  </div>
                </td>
                <td class="text-right">{% if pedido.taxa_servico %}{{ pedido.taxa_servico|floatformat:2 }}{% endif %}</td>
                <td class="text-center" style="width: 30px;"></td>
            </tr>
            
            {% if pedido.desconto > 0 %}
            <tr class="warning">
                <td class="text-right">Desconto</td>
                <td class="text-right">- {{ pedido.desconto|floatformat:2 }}</td>
                <td class="text-center" style="width: 30px;"><a id="remover_desconto" href="" title="Remover desconto" class="close red" onclick="return remover_desconto({{ pedido.id }}, '{{ pedido.desconto|floatformat:2 }}', '{{ csrf_token }}');"">&times;</a></td>
            </tr>
            {% endif %}
            
            <tr>
                <th class="text-right">Total</th>
                <th class="text-right">{{ pedido.total|floatformat:2 }}</th>
                <th class="text-center" style="width: 30px;"></th>
            </tr>
            
            {% if pedido.pagamentos %}
            {% for pagamento in pedido.pagamentos %}
            <tr class="danger {% if pagamento.estado == 0 %}riscado{% endif %}">
                <td class="text-right">Pagamento {{ forloop.counter }} ({{ pagamento.tipo }})</td>
                <td class="text-right">- {{ pagamento.valor|floatformat:2 }}</td>
                <td class="text-center" style="width: 30px;">
                    {% if not pedido.fechado %}
                    {% if pagamento.estado == 1 %}<a href="/pedido/pagamento/excluir/?id={{ pedido.id }}&p={{ pagamento.id }}" title="Excluir R$ {{ pagamento.valor|floatformat:2 }} em {{ pagamento.tipo }}" class="close red">&times;</a>{% endif %}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            {% if False and pedido.pagamentos.count > 1 %}
            <tr>
                <td class="text-right">Total pago</td>
                <td class="text-right">{{ pedido.total_pago|floatformat:2 }}</td>
                <td class="text-center" style="width: 30px;"></td>
            </tr>
            {% endif %}
            {% endif %}
            
            {% if pedido.desconto or pedido.taxa_servico or pedido.pagamentos and not pedido.troco %}
            <tr class="success" style="border-top: 1px solid black">
                <th class="text-right">Valor Final</th>
                <th class="text-right">{{ pedido.valor_final|floatformat:2 }}</th>
                <th class="text-center" style="width: 30px;"></th>
            </tr>
            {% endif %}
            {% if pedido.troco %}
            <tr>
                <td class="text-right">Troco</td>
                <td class="text-right">{{ pedido.troco|floatformat:2 }}</td>
                <td class="text-center" style="width: 30px;"></td>
            </tr>
            {% endif %}
        </table>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
        
        {% if pedido.valor_final > 0 %}
        <h4>Formas de Pagamento</h4>
        <form action="/pedido/pagamento/adicionar/?id={{ pedido.id }}" method="post" role="form">
            {% csrf_token %}
            <div class="form-group">
                <label class="radio-inline">
                  <input type="radio" name="tipo" value="0" checked> Dinheiro
                </label>
                <label class="radio-inline">
                  <input type="radio" name="tipo" value="1"> Débito
                </label>
                <label class="radio-inline">
                  <input type="radio" name="tipo" value="2"> Cartão
                </label>
                {% if pedido.cliente %}
                <label class="radio-inline">
                  <input type="radio" name="tipo" value="3"> Cheque
                </label>
                <label class="radio-inline">
                  <input type="radio" name="tipo" value="4"> Crediário
                </label>
                {% else %}
                <label class="radio-inline">
                  <a href="/pedido_cliente/{{ pedido.id }}/?next=/pedido/pagamento/?id={{ pedido.id }}">Associar cliente</a>
                </label>
                {% endif %}
            </div>
            
        <div class="btn-group pull-left">
            <a class="btn btn-default btn-primary btn-lg" href="/pedido/?id={{ pedido.id }}" title="voltar" ><span class="glyphicon glyphicon-chevron-left"></span> {{ pedido.mesa }}</a>
        </div>
        
        <div class="form-group">
            <div class="input-group input-group-md col-xs-4 col-xs-offset-3">
                <span class="input-group-addon">Valor</span>                
                <input id="valor" class="form-control input-lg" type="number" step="0.01" min="0.01" name="valor" placeholder="R$ 0,00" autocomplete="off" />

                <div class="input-group-btn">
                    <button type="submit" class="btn btn-primary btn-lg">Pagar</button>
                </div>
            </div>
        </div>
        {% else %}
        <div class="btn-group pull-left">
            <a class="btn btn-default btn-primary btn-lg" href="/pedido/?id={{ pedido.id }}" title="voltar" ><span class="glyphicon glyphicon-chevron-left"></span> {{ pedido.mesa }}</a>
        </div>
        
        {% if not pedido.fechado %}
        <div class="btn-group pull-right">
            <a class="btn btn-default btn-primary btn-lg" href="/pedido/fechar/{{ pedido.mesa.id }}/" title="Voltar" ><span class="glyphicon glyphicon-check"></span> Encerrar</a>
        </div>
        {% endif %}
        {% endif %}
            
        </form>
        
    </div>
</div>

{% block template_js %}
<script type="text/javascript">
$(document).ready(function() {
	$('#taxa_servico').click(function() {
    	$(this).attr("disabled", true);
    	
    	var taxa_servico = $(this).is(':checked');
    	var pedido_id = {{ pedido.id }};
    	
    	alterar_taxa_servico(taxa_servico, pedido_id);
    	
    	$(this).removeAttr("disabled");
    });
	
	$("html, body").animate({ scrollTop: $(document).height() }, 1000, function() {$("#valor").focus();});
	$("#tabela").scrollTop($("#tabela")[0].scrollHeight);
	
	$("input[name=tipo]").on('change', function() {
		$("#valor").focus();
		$("#valor").select();
	});
	
});

function alterar_taxa_servico(taxa_servico, pedido_id) {
	var csrf_token = getCookie('csrftoken');
	
	$.ajax({
        type: "POST",
        url: "/taxa_servico/alterar/",
        data: {
            pedido_id: pedido_id,
            taxa_servico: taxa_servico,
            csrfmiddlewaretoken: csrf_token
        },
        async: false,
        success: function(retorno) {
        	window.location = window.location
            return true;
        },
        statusCode: {
            404: function() {
                alert('Pagina não encontrada');
                return false;
            },
            408: function() {
                alert('Não responde');
                return false;
            }
        }
    });
}

function remover_desconto(pedido_id, desconto, csrf_token) {
	desconto = 0;
    
	$.ajax(
        {
            type: "POST",
            url: "/pedido/desconto/",
            data: {
                pedido_id: pedido_id,
                desconto: desconto,
                csrfmiddlewaretoken: csrf_token
            },
            async: false,
            success: function(retorno) {
                return true;
            },
            statusCode: {
                404: function() {
                    alert('Pagina não encontrada');
                    return false;
                },
                408: function() {
                    alert('Não responde');
                    return false;
                }
            }
        }
    );
}

function desconto(pedido_id, desconto, csrf_token) {
    
    desconto = window.prompt("Desconto", desconto);
    if (desconto == null)
        return false;
    
    $.ajax(
        {
            type: "POST",
            url: "/pedido/desconto/",
            data: {
                pedido_id: pedido_id,
                desconto: desconto,
                csrfmiddlewaretoken: csrf_token
            },
            async: false,
            success: function(retorno) {
                return true;
            },
            statusCode: {
                404: function() {
                    alert('Pagina não encontrada');
                    return false;
                },
                408: function() {
                    alert('Não responde');
                    return false;
                }
            }
        }
    );
}
</script>
{% endblock %}

{% endblock %}

